<template>
	<view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="false">
			<block slot="left">
				<text @tap="toPage()" class="cuIcon-back" style="font-size: 40rpx;"></text>
			</block>
			<block slot="content">首页</block>
		</cu-custom>
		
		
		<view>
			<!-- 正在进行中的订单 -->
			<view v-if="underwayOrder && underwayOrder.serviceName" class="cu-card case ">
				<view class="cu-item shadow bg-gradual-blue">
					<view class="flex align-center justify-center padding-sm solid-bottom">
						正在进行中的订单
					</view>
					<view class="padding-sm" @tap="toOrderDetail(underwayOrder)">
						<view class="" style="margin-left: 50rpx;">
							维修类型：
							<text>
								{{ underwayOrder.serviceName }}
							</text>
						</view>
						<view class="flex align-center">
							<view class="cu-round margin-xs" style="background-color: #1AAD19;"></view>
							<text>
								{{ underwayOrder.location.address }}
							</text>
						</view>
						<view class="flex justify-end align-center padding-top-sm">
							维修费用：
							<text class="text-price text-red text-xxl">
								{{ underwayOrder.realAmount }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view>
				<!-- 正在进行中的订单 -->
				<scroll-view scroll-x class="bg-white nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
						  v-for="(item,index) in tabBars" :key="index" :data-id="item.index" @click="tabSelect(item)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				
				<swiper :current="TabCur" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
					<swiper-item class="swiper-item" v-for="(tab,index1) in tabBars" :key="index1">
				        <scroll-view class="scroll-v list" scroll-y @scrolltolower="loadMore()">
							<view v-if="orderList.length > 0">
								<view v-for="(orderItem,index2) in orderList" :key="orderItem.id">
									<view class="cu-card case" @tap="toOrderDetail(orderItem)">
										<view class="cu-item shadow padding-sm" style="margin: 15rpx;">
											<view class="" style="margin-left: 50rpx;">
												维修类型：
												<text>
													{{ orderItem.serviceName }}
												</text>
											</view>
											<view class="" style="margin-left: 50rpx;">
												创建时间：
												<text>
													{{ orderItem.createdTime }}
												</text>
											</view>
											<view class="flex align-center">
												<view class="cu-round margin-xs" style="background-color: #1AAD19;"></view>
												<text>
													{{ orderItem.location.address }}
												</text>
											</view>
											<view class="flex justify-end align-center">
												维修费用：
												<text class="text-price text-red text-xl">
													{{ orderItem.realAmount }}
												</text>
											</view>
										</view>
									</view>
								</view>
								<view class="loading-more" style="text-align: center;color: #B2B2B2;">
									<text class="loading-more-text">{{ loadingText }}</text>
								</view>
							</view>
							<view v-if="orderList.length == 0" class="flex flex-column justify-center align-center" style="height: 70vh;">
								<view>
									<image src="../../static/img/color_order.png" style="width: 200upx;height: 200upx;" mode=""></image>
								</view>
								<view style="text-align: center;color: #B2B2B2;margin-top: 10upx;">
									暂无订单
								</view>
							</view>
				        </scroll-view>
				    </swiper-item>
				</swiper>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				underwayOrder: {},
				TabCur: 0,
				tabId: 4, //todo- 初始状态 需要修改
				tabBars:[
					{
						"name": "已完成",
						"index": 0,
						"pinyin": "over",
						"id": 4
					},
					{
						"name": "已取消",
						"index": 1,
						"pinyin": "cancle",
						"id": 5
					}
				],
				scrollInto: "",
				pageIndex: 1,
				loadingText: '',
				orderList: [],
			}
		},
		onLoad() {
			this.getUnderway()
			this.getList()
		},
		methods: {
			toPage(){
				uni.redirectTo({
					url: '../user/user'
				})
			},
			async getList(){
				let res = await this.$api.getOrders({
					status: this.tabId,
					pageIndex: this.pageIndex,
					pageSize: 20,
				});
				this.orderList = this.orderList.concat(res.data.data.records)
				if(this.orderList.length < 20){
					this.loadingText = '没有啦！'
				}
			},
			async getUnderway(){
				let res = await this.$api.getUnderwayOrder()
				if(res && res.data.status == 200 && res.data.data){
					this.underwayOrder = res.data.data
				}
			},
			loadMore(e) {
				this.pageIndex ++
				if(this.orderList.length % 20 != 0){
					this.loadingText = '没有啦！'
				}else{
					this.getList();
				}
			},
			tabSelect(e) {
				this.TabCur = e.index;
				this.tabId = e.id
				this.pageIndex = 1
			},
			switchTab(index) {
				console.log(this.tabBars[index])
				this.TabCur = index;
				this.tabId = this.tabBars[index].id
			    this.scrollInto = this.tabBars[index].pinyin
				this.orderList = []
				this.getList()
			},
			ontabchange(e) {
			    let index = e.target.current || e.detail.current;
			    this.switchTab(index);
			},
			toOrderDetail(e){
				uni.setStorageSync('orderDatil', e)
				uni.navigateTo({
					url: '../orderDetail/orderDetail'
				})
			}
		}
	}
</script>

<style>
	
	.cu-round{
		height: 30rpx;width: 30rpx;border-radius: 50%;
	}
	
	.swiper-box {
		height: 83vh;
	}
	
	.scroll-v {
	    flex: 1;
	    /* #ifndef MP-ALIPAY */
	    flex-direction: column;
	    /* #endif */
	    width: 750upx;
		height: 1100upx;
	}
	
</style>
